<template>
  <div class="goodsMedia" v-if="isInit">
    <el-form :model="this" label-width="100px">
      <el-form-item label="商品主图:" class="is-required" >
        <y-upload-img
          :url="imgAry"
          :disabled="disabled"
          value-type="ObjectArray"
          @update="updateMain"
          redraw-on-server
          :cropper-options="{
            fixedNumber: [1, 1],
            centerBox: false
          }"
          :limit="1"
          re-upload
          business-sys-module-code="GOODS_MEDIA">
        </y-upload-img>
      </el-form-item>
      <el-form-item label="商品视频:">
        <y-upload-video
          :url="videoAry"
          :disabled="disabled"
          @update="uploadVideoModel"
          :limitSize="100"
          re-upload
          redraw-on-server
          business-sys-module-code="GOODS_MEDIA">
        </y-upload-video>
      </el-form-item>
      <el-form-item label="商品画廊:" class="is-required">
        <y-upload-img
          :url="galleryAry"
          :disabled="disabled"
          value-type="ObjectArray"
          @update="updateModelList"
          redraw-on-server
          :cropper-options="{
            fixedNumber: [1, 1],
            centerBox: false
          }"
          re-upload
          business-sys-module-code="GOODS_MEDIA">
        </y-upload-img>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "goodsMedia",
  props:{
    productId: String,
    disabled:{
      type: Boolean,
      default: false
    }
  },
  computed:{
    imgAry(){
      return this.imgList.length ? [{
        url: this.imgList[0].imgUrl,
        id: this.imgList[0].imgAttachmentId
      }] : []
    },
    galleryAry(){
      return this.galleryList.map(al => ({
        url: al.imgUrl,
        id: al.imgAttachmentId
      }));
    },
    videoAry(){
      return this.videoList.map(al => ({
        url: al.videoUrl,
        id: al.videoAttachmentId
      }));
    }
  },
  data(){
    return {
      isInit: false,
      imgList: [],
      galleryList: [],
      videoList: []
    }
  },
  mounted() {
    this.refresh();
  },
  methods:{
    refresh(type){
      this.$yAxios({
        url: this.$api.goods.goodsMediaList,
        data: {
          productId: this.productId
        },
        loading: true
      }, info => {
        if(!type){
          this.imgList = info.filter(al => al.iconFlag === 1);
          this.galleryList = info.filter(al => al.iconFlag === 0 && al.imgUrl);
          this.videoList = info.filter(al => al.iconFlag === 0 && !al.imgUrl && al.videoUrl);
        }else{
          if(type === '0'){
            this.imgList = info.filter(al => al.iconFlag === 1);
          }
          if(type === '1'){
            this.galleryList = info.filter(al => al.iconFlag === 0 && al.imgUrl);
          }
          if(type === '2'){
            this.videoList = info.filter(al =>  al.iconFlag === 0 && !al.imgUrl && al.videoUrl);
          }
        }
        this.isInit = true;
      })
    },
    updateMain({type, file, preFile}){
      this.updateModel({type, file, preFile}, '0')
    },
    updateModel({type, file, preFile}, albumType = '0'){
      let url, data, msg;
      let ary, str;
      let idStr = albumType === '2' ? 'videoAttachmentId' : 'imgAttachmentId';
      let urlStr = albumType === '2' ? 'videoUrl' : 'imgUrl';
      switch(albumType){
        case '0':{
          ary = this.imgList;
          str = '主图';
          break;
        }
        case '1':{
          ary = this.galleryList;
          str = '画廊';
          break;
        }
        case '2':{
          ary = this.videoList;
          str = '视频';
          break;
        }
      }
      switch(type){
        case 'delete':{
          let removeFile = albumType === '0' ? ary[0] : ary.find(al => al[idStr] === file.id);
          if(!removeFile){
            return;
          }
          url = this.$api.goods.removeGoodsMedia;
          data = {
            id: removeFile.id
          };
          msg = `删除${str}信息成功`;
          break;
        }
        case 'edit':{
          let obj;
          if(!preFile && albumType === '0'){
            url = this.$api.goods.updateGoodsMedia;
            obj = this.imgList[0];
          }else if(preFile){
            url = this.$api.goods.updateGoodsMedia;
            obj = ary.find(item => item[urlStr] === preFile.name && item[idStr] === preFile.id);
          }else{
            this.$alert(`无法更新${str}，请先删除${str}后再次上传`);
            return;
          }
          if(obj){
            data = Object.assign({}, obj, {
              [idStr]: file.id,
              [urlStr]: file.name,
            })
            msg = `更新${str}成功`;
          }else{
            this.$alert(`无法更新${str}，请先删除${str}后再次上传`);
            return;
          }
          break;
        }
        case 'add':{
          url = this.$api.goods.addGoodsMedia;
          data = {
            [idStr]: file.id,
            [urlStr]: file.name,
            iconFlag: albumType === '0' ? 1 : 0,
            productId: this.productId
          }
          msg = `保存${str}成功`;
        }
      }
      this.$yAxios({
        url, data, loading: true, eventsAfterPost: 'redraw'
      }, info => {
        this.$message({
          type: 'success',
          message: msg
        });
        this.refresh(albumType);
      })
    },
    updateModelList({type, file, preFile}){
      this.updateModel({type, file, preFile}, '1')
    },
    uploadVideoModel({type, file, preFile}){
      this.updateModel({type, file, preFile}, '2')
    },
    save(){
      return new Promise((resolve, reject) => {
        if(!this.imgList.length){
          this.$alert('必须选择一个商品主图', {
            confirmButtonText: '确定'
          });
          resolve(false);
        }else if(this.galleryList.length < 1){
          this.$alert('必须为商品画廊上传至少1张图片', {
            confirmButtonText: '确定'
          });
          resolve(false);
        }else{
          resolve(true);
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.goodsMedia{
  padding-top: 20px;
  border-top: @common-border;
  border-bottom: @common-border;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  /deep/ .el-form-item:first-child{
    padding-bottom: 11px;
    margin-bottom: 11px;
    border-bottom: @common-border;
  }
}
</style>